<template>
  <!-- 网格容器 -->
  <div class="grid-container">
    <!-- 网格元素 -->
    <div class="grid-item one">One</div>
    <div class="grid-item two">Two</div>
    <div class="grid-item three">Three</div>
    <div class="grid-item four">Four</div>
    <div class="grid-item five">Five</div>
    <div class="grid-item six">Six</div>
  </div>
</template>

<script>
export default {
  name: "callout",
  data() {
    return {};
  },
};
</script>

<style scope lang="scss">
.grid-container {
  display: grid; /* 声明一个Grid容器 */
  // grid-template-columns: repeat(
  //   3,
  //   200px
  // ); /* 声明列数和每列的宽度，3列，每一列宽度为 200px */
  // /* grid-gap: 20px 20px; 该行代码等同于下面这行代码 */
  // gap: 20px; /* 声明行间距和列间距 */
  // grid-template-rows: 100px 200px; /* 声明行的高度 - 第一行100px，第二行200px，两行之外的行会将剩余高度均分 */
  // width: fit-content; /* 元素的宽度为由内容的宽度撑开 */

  // grid-template-columns: repeat(auto-fill, 150px);
  border: 2px solid red;
  border-radius: 4px;
  background-color: #eee;
}

.one {
  background: #18dfbe;
}

.two {
  background: #ff49f8;
}

.three {
  background: #0bc530;
}

.four {
  background: #38d1d8;
}

.five {
  background: #edbf7e;
}

.six {
  background: #551cce;
}

.grid-item {
  text-align: center;
  font-size: 200%;
  color: #fff;
}
</style>
